<template>
	<view class="ProductDetailTabs" :class="{ isSkelett: isSkelett }">
		<view class="ProductDetailTabs-tabs">
			<view class="ProductDetailTabs-tabs-main" :class="{ fixed: isFixed }">
				<view
					:key="index"
					v-for="(item, index) in tabsList"
					@click="changeScrollIntoView(item, index)"
					class="ProductDetailTabs-tabs-main-item"
				>
					<text class="ProductDetailTabs-tabs-main-item-text">{{ item.label }}</text>
				</view>

				<view v-show="filterList.length" class="ProductDetailTabs-tabs-main-activeItem" :style="{ transform: displacement }">
					<image src="@/static/detail/img_xqy_selectedbar.png" />
				</view>
			</view>
		</view>

		<view class="ProductDetailTabs-main">
			<view :key="index" v-for="(item, index) in filterList" class="ProductDetailTabs-main-item">
				<view class="ProductDetailTabs-main-item-title">
					<image :src="item.icon" />
				</view>
				<view class="ProductDetailTabs-main-item-content">
					<view :key="subIndex" v-for="(subItem, subIndex) in item.children" class="ProductDetailTabs-main-item-content-item">
						<view class="ProductDetailTabs-main-item-content-item-title">
							{{ subItem.titles }}
						</view>

						<view class="ProductDetailTabs-main-item-content-item-content">
							<view
								:key="lastIndex"
								v-for="(lastItem, lastIndex) in subItem.option"
								class="ProductDetailTabs-main-item-content-item-content-item"
							>
								· {{ lastItem.optionName }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getSystemInfo } from '@/utils';
import { getDomeInfo } from '@/utils/common';

const tabsList = [
	{
		label: '套餐详情'
	},
	{
		label: '购买须知'
	}
];

export default {
	name: 'ProductDetailTabs',

	props: {
		list: {
			type: Array,
			default: () => {
				return [];
			}
		},

		isSkelett: {
			type: Boolean,
			default: true
		}
	},

	data() {
		return {
			isFixed: false,
			tabCurrent: 0,
			isProhibit: false,

			scrollTop: 0,
			itemsDomInfo: [],
			mainItemDomInfo: []
		};
	},

	computed: {
		displacement() {
			const { tabCurrent, itemsDomInfo, isFixed } = this;
			const { left, width } = itemsDomInfo[tabCurrent] || {};

			const translateX = left + width / 2 - uni.upx2px(40);

			return `translateX(${translateX}px)`;
		},

		tabsList() {
			const { list } = this;

			if (!list.length) {
				return tabsList;
			}
			return list.map((item) => ({
				label: item.title
			}));
		},

		filterList() {
			const { list } = this;
			const newList = list.map((item) => {
				return {
					icon: item.icon,
					children: item.children
				};
			});

			return newList;
		}
	},

	created() {
		const { screenHeight, windowHeight } = getSystemInfo();

		this.screenHeight = (windowHeight || screenHeight) - uni.upx2px(208);
	},

	methods: {
		getDemoPosition() {
			this.$nextTick((e) => {
				getDomeInfo.call(this, '.ProductDetailTabs-tabs-main-item-text').then((res) => {
					this.itemsDomInfo = res || [];
				});

				this.getTabsscrollTop();

				getDomeInfo.call(this, '.ProductDetailTabs-main-item').then((res) => {
					this.mainItemDomInfo = (res || []).map((item) => item.top + this.scrollTop);
				});
			});
		},

		changePageScroll(e) {
			const { scrollTop } = e;
			this.scrollTop = scrollTop;

			if (this.isProhibit) {
				return;
			}

			let tabCurrent = 0;
			const singleHeight = this.itemsDomInfo[0]?.height || 0;

			this.mainItemDomInfo.forEach((item, index) => {
				const difference = item - scrollTop - singleHeight;
				if (difference < 0) {
					tabCurrent = index;
				}
			});

			this.tabCurrent = tabCurrent;
		},

		changeScrollIntoView(params, index) {
			if (this.tabCurrent === index) {
				return;
			}

			this.isProhibit = true;

			const { mainItemDomInfo, itemsDomInfo, scrollTop, screenHeight } = this;
			this.tabCurrent = index;

			const top = mainItemDomInfo[index] - itemsDomInfo[0]?.height || 0;

			const difference = top - scrollTop;
			const diff = difference < screenHeight;

			if (difference < 0 || !diff) {
				uni.pageScrollTo({
					scrollTop: top,
					duration: 0,
					success: () => {
						setTimeout((e) => {
							this.isProhibit = false;
						}, 100);
					}
				});
				return;
			}

			this.isProhibit = false;
		},

		getTabsscrollTop() {
			getDomeInfo.call(this, '.ProductDetailTabs-tabs-main', false).then((res) => {
				const { height } = res;

				uni.createIntersectionObserver(this)
					.relativeToViewport({
						top: -height
					})
					.observe('.ProductDetailTabs-tabs', (subRes) => {
						const {
							boundingClientRect: { top }
						} = subRes;

						this.isFixed = top <= 0;
					});
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';

.ProductDetailTabs {
	&-tabs {
		height: 108rpx;

		&-main {
			display: flex;
			align-items: center;
			justify-content: center;

			color: #000;
			font-size: 32rpx;
			font-weight: bold;
			height: 108rpx;
			background: #fff;
			position: relative;
			border-bottom: 4rpx solid #f7f7f7;
			border-radius: 24rpx 24rpx 0px 0px;

			&-item {
				flex: 1;
				text-align: right;

				&-text {
					height: 108rpx;
					line-height: 108rpx;
					margin: 0 47rpx;
					display: inline-block;
				}

				&:nth-child(2) {
					text-align: left;
				}
			}

			&-activeItem {
				position: absolute;
				left: 0;
				bottom: 18rpx;
				display: flex;
				align-items: center;
				transition: transform 0.3s;

				image {
					width: 40rpx;
					height: 8rpx;
				}
			}

			&.fixed {
				position: fixed;
				top: 0;
				left: 20rpx;
				width: calc(100vw - 40rpx);
			}
		}
	}

	&-main-item {
		overflow: hidden;

		&-title {
			margin-top: 38rpx;
			display: flex;
			justify-content: center;

			image {
				width: 132rpx;
				height: 68rpx;
			}
		}

		&-content {
			padding-bottom: 40rpx;

			&-item {
				margin-top: 30rpx;
				padding: 0 26rpx;

				&-title {
					display: flex;
					align-items: center;
					color: #000;
					font-size: 28rpx;
					font-weight: bold;
					line-height: 40rpx;

					&::before {
						content: '';
						display: inline-block;
						width: 8rpx;
						height: 8rpx;
						background: #5359FF;
						border-radius: 50%;
						margin-right: 20rpx;
					}
				}

				&-content-item {
					padding: 0 28rpx;
					margin-top: 12rpx;
					color: #333;
					font-size: 24rpx;
					line-height: 34rpx;
					display: flex;
					align-items: center;
				}
			}
		}
	}

	&.isSkelett {
		.ProductDetailTabs-tabs-main-item {
			border: none;
			border-radius: 12rpx;
			background: $skelettBgColor;

			text {
				visibility: hidden;
			}
		}
		.ProductDetailTabs-tabs-main-activeItem {
			display: none;
		}
	}
}
</style>
